import React, { Component } from 'react';
import "../../styles/home/MyFooter.css"

//本地图片必须单独导入
import img from "../../assets/img/01.webp"

class MyFooter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [{ img, text: "店铺" }, { img, text: "分类" }, { img, text: "全部商品" },
            { img, text: "购物车" }, { img, text: "个人中心" },],
            currentIndex: 0//用来保存导航按钮的下标
        }

    }

    footerClick(index) {
        // this.state.currentIndex = index; //这个写法可以保存数据到state, 但是无法触发组件更新
        // console.log(index);
        this.setState({
            //setState会将传入的新的state对象和之前的旧的state对象进行合并( 同名属性会覆盖处理 ). 同时setState会触发组件更新
            currentIndex: index
        }, () => { console.log(this.state.currentIndex); })
        //不能在setState的后面直接获取state中最新的值,因为setState本身是通过异步的方式来更新组件状态的. 但是可以在setState的回调函数中获取( 回调函数会等到组件状态更新完毕才会执行 )
        //console.log(this.state.currentIndex);
    }



    render() {//负责组件内容的渲染  只要组件更新一次,就会执行一次
        return (
            <div className='footer'>
                {
                    //渲染底部导航按钮
                    this.state.list.map((item, index) => {
                        // 事件绑定 on事件类型={ 事件处理函数 }
                        // 事件绑定 on事件类型={()=>{ 事件处理函数(参数) }}   这种写法支持传参
                        return (
                            <div className={`footerlist ${index === this.state.currentIndex ? "active" : ""}`} key={index} onClick={() => { this.footerClick(index) }}>
                                <img src={item.img} alt="" />
                                <div>{item.text}</div>
                            </div>
                            // style绑定 style={{color: this.state.currentIndex == index ? 'red' : '' ,fontWeight: this.state.currentIndex == index ? 'bold' : '' }}代码繁杂
                            // class绑定 className={ `tab ${ this.state.currentIndex == index ? 'active' : '' }` }代码简洁,且可更改项多
                        )
                    })
                }
            </div>
        );
    }
}

export default MyFooter;